import { useEffect, useRef } from "react"
import { useDispatch, useSelector } from "react-redux"
import { getChannels, getArticles, deleteArticle } from "@/store/actions"
import { Modal } from "antd"
import { ExclamationCircleOutlined } from "@ant-design/icons"
export default function useList() {
  const { confirm } = Modal
  // 获取文章数据
  const dispatch = useDispatch()
  const { channels, page, pageSize, count, list } = useSelector((state) => state.article)
  useEffect(() => {
    dispatch(getChannels())
    dispatch(getArticles({}))
  }, [dispatch])
  // 优化文章状态的处理
  const articleStatus = {
    0: { color: "yellow", text: "草稿" },
    1: { color: "#ccc", text: "待审核" },
    2: { color: "green", text: "审核通过" },
    3: { color: "red", text: "审核失败" }
  }
  // 参数：要存储什么类型的数据，就设置什么类型的默认值
  const paramsRef = useRef({})
  // 搜索
  const onSearch = (values) => {
    const { status, channel_id, date } = values
    // 将表单中选中数据，组装成接口需要的数据格式，然后，传递给接口
    const params = {}

    // 处理状态
    if (status !== -1) {
      params.status = status
    }

    // 处理频道
    // if (channel_id !== undefined) {
    if (typeof channel_id !== "undefined") {
      params.channel_id = channel_id
    }

    // 日期范围
    if (typeof date !== "undefined" && date !== null) {
      params.begin_pubdate = date[0].format("YYYY-MM-DD HH:mm:ss")
      params.end_pubdate = date[1].format("YYYY-MM-DD HH:mm:ss")
    }
    // 将筛选数据存储到 ref 对象中
    paramsRef.current = params
    dispatch(getArticles(params))
  }
  // 分页
  const changePage = (page, pageSize) => {
    // 分页数据
    const params = {
      // 从 ref 对象中拿筛选数据
      ...paramsRef.current,
      page,
      per_page: pageSize
    }
    dispatch(getArticles(params))
  }
  // 删除文章
  const delArticle = (id) => {
    confirm({
      title: "温馨提示",
      icon: <ExclamationCircleOutlined />,
      content: "此操作将永久删除该文章, 是否继续?",
      onOk: () => {
        // 执行删除操作
        try {
          dispatch(deleteArticle(id, paramsRef.current))
        } catch {}
      }
    })
  }
  return { channels, page, pageSize, count, list, articleStatus, onSearch, changePage, delArticle }
}
/* 
`useRef` hook 创建的 ref 对象，有以下特点：
1. ref 对象有一个 current 属性，可以使用该属性存储任意值
2. 修改 ref 对象 current 属性的值**不会导致组件重新渲染**
 */
